<header class="header navbar bg-white shadow">
  <div class="btn-group tool-button">
    <a class="btn btn-primary navbar-btn" href="/private/cms/article" data-pjax><i class="ti-angle-left"></i> 返回</a>
  </div>
  <div class="pull-right">
    <div class="btn-group tool-button">
      <button class="btn btn-primary navbar-btn" type="button" id="save"> 保存</button>
    </div>
  </div>
</header>
<div class="content-wrap">
  <div class="wrapper" style="min-height:500px;height: 100%;">
    <form id="addForm" role="form" class="form-horizontal parsley-form" data-parsley-validate
          action="/private/cms/article/editDo" method="post">
      <input type="hidden" name="id" value="<%=obj.id%>">
      <div class="box-tab">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#home1" data-toggle="tab">基本信息</a>

          </li>
          <li><a href="#profile1" data-toggle="tab">文章内容</a>
          </li>
          <li><a href="#settings1" data-toggle="tab" style="display: none">SEO设置</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane fade active in" id="home1">
            <div class="col-lg-12">
              <div class="form-group has-feedback">
                <label for="channelId" class="col-sm-2 control-label">所属栏目</label>

                <div class="col-sm-8">
                  <div class="input-group">
                    <input id="channelId" type="text" class="form-control" placeholder="请选择栏目" disabled
                           value="<%=typeof obj.channelId!='undefined'?obj.channelId.name:'' %>" data-parsley-required="true"/>

			                             		<span class="input-group-btn">
			                             			<button type="button" class="btn btn-primary" data-toggle="modal"
                                                data-target="#dialogSelect"><i class="ti-plus"></i>选择
                                        </button>
			                             		</span>
                  </div>
                  <input type="hidden" name="channelId" value="<%=typeof obj.channelId!='undefined'?obj.channelId.id:0 %>">
                </div>
              </div>
              <div class="form-group">
                <label for="title" class="col-sm-2 control-label">文章标题</label>

                <div class="col-sm-8">
                  <input type="text" id="title" class="form-control" name="title" data-parsley-required="true"
                         value="<%=obj.title%>" placeholder="文章标题">
                </div>
              </div>
              <!--<div class="form-group">-->
                <!--<label for="client" class="col-sm-2 control-label">客户端</label>-->

                <!--<div class="col-sm-8">-->
                  <!--<select id="client" name="client" class="form-control">-->
                    <!--<option value="pc" <%if('pc'==obj.client){%>selected<%}%>>电脑端</option>-->
                    <!--<option value="wap" <%if('wap'==obj.client){%>selected<%}%>>手机端</option>-->
                  <!--</select>-->
                <!--</div>-->
              <!--</div>-->
              <div class="form-group">
                <label for="author" class="col-sm-2 control-label">作者</label>

                <div class="col-sm-8">
                  <input type="text" id="author" class="form-control" name="author"
                         value="<%=obj.author||user.nickname||''%>" placeholder="作者">
                </div>
              </div>
              <div class="form-group">
                <label for="footer_content" class="col-sm-2 control-label">文章简介</label>

                <div class="col-sm-8">
                  <textarea id="info" name="info" data-parsley-required="true" class="form-control" style="width:100%;height:150px;"><%=obj.info||''%></textarea>
                </div>
              </div>
              <div class="form-group">
                <label for="publishAt" class="col-sm-2 control-label">发布时间</label>

                <div class="col-sm-8 input-group date form_datetime " style="padding-left: 16px;padding-right: 16px;" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="publishAt">
                  <input type="text" size="16" readonly class="form-control" value="<%=moment(obj.publishAt*1000).format('YYYY-MM-DD HH:mm:ss')%>" data-parsley-required="true">
                  <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                  <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="hidden" id="publishAt" name="publishAt" value="<%=moment(obj.publishAt*1000).format('YYYY-MM-DD HH:mm:ss')%>" />
              </div>
              <div class="form-group">
                <label for="publish" class="col-sm-2 control-label">是否发布</label>
                <div class="col-sm-8 switcha">
                  <div class="mr15">
                    <input type="checkbox" id="publish" name="publish" class="js-switch-blue" value="true" <%if(!obj.disabled){%>checked<%}%>>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="picurl" class="col-sm-2 control-label">标题图</label>

                <div class="col-sm-8">
                  <div id="queue"></div>
                  <div class="input-group">
                    <input id="file_upload" name="file_upload" type="file" multiple="false">
                  <span class="input-group-btn">
                  <button class="btn btn-color current-time" type="button"
                          onclick="$('#file_upload').uploadifive('upload')">上传<i class="ti-upload ml5"></i></button>
                  </span>
                  </div>
                  <div id="img" style="padding: 5px;">
                    <%if(obj.picurl){%><img src='<%=obj.picurl%>' style='width:150px;height:95px;'><%}%>
                  </div>
                  <input type="hidden" id="picurl" name="picurl" value="<%=obj.picurl||''%>" >
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="profile1">
            <div class="col-lg-12">

              <textarea id="content" name="content" style="width:100%;height:200px;"><%=typeof obj.contentId!='undefined'?obj.contentId.content:'' %></textarea>

            </div>
          </div>
          <div class="tab-pane fade" id="settings1">
            <div class="col-lg-12">
              <div class="form-group">
                <label for="seo_title" class="col-sm-2 control-label">网页标题</label>

                <div class="col-sm-8">
                  <input type="text" id="seo_title" class="form-control" name="seo_title"
                         placeholder="title"  value="<%=obj.seo_title||''%>">
                </div>
              </div>
              <div class="form-group">
                <label for="seo_keywords" class="col-sm-2 control-label">网页关键词</label>

                <div class="col-sm-8">
                  <input type="text" id="seo_keywords" class="form-control" name="seo_keywords"
                         placeholder="keywords"  value="<%=obj.seo_keywords||''%>">
                </div>
              </div>
              <div class="form-group">
                <label for="seo_description" class="col-sm-2 control-label">网页描述</label>

                <div class="col-sm-8">
                  <input type="text" id="seo_description" class="form-control" name="seo_description"
                         placeholder="description"  value="<%=obj.seo_description||''%>">
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </form>
  </div>
</div>
<div id="dialogSelect" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">选择栏目</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12">
            <div id="jsTree" class="demo"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
        <button type="button" class="btn btn-primary" onclick="select()">确认选择</button>
      </div>
    </div>
  </div>
</div>
<script language="JavaScript">
  function clearFile() {
    $("#img").html("");
    $("#picurl").val("");
  }
  function initTreeView() {
    $("#jsTree").jstree({
      plugins: ["wholerow", "json_data"],
      core: {
        data: {
          dataType: "json",
          url: function (node) {
            return node.id === "#" ? "/private/cms/channel/tree" : "/private/cms/channel/tree?pid=" + node.id
          }
        },
        multiple: false
      }
    }).on("dblclick.jstree", function (node) {
      select();
    });
  }
  //选择父菜单
  function select() {
    var tree = $.jstree.reference("#jsTree");
    var node = tree.get_selected(true);
    $("#addForm #channelId").val(node[0].text);
    $("#addForm input[name='channelId']").val(node[0].id);
    $("#dialogSelect").modal("hide");
  }
  $(document).ready(function () {
    $('.form_datetime').datetimepicker({
      language:  'zh-CN',
      format:'yyyy-mm-dd hh:ii:ss',
      weekStart: 1,
      todayBtn:  1,
      autoclose: 1,
      todayHighlight: 1,
      startView: 2,
      forceParse: 0,
      showMeridian: 1
    });
    initTreeView();
    var ue = new baidu.editor.ui.Editor();
    ue.render('content');
    $('#file_upload').uploadifive({
      'auto': false,
      'multi': false,
      'width': '100%',
      'height': '35',
      'buttonText': '请选择图片',
      'fileType': 'image/*',
      'fileSizeLimit': 1024,
      'queueSizeLimit': 1,
      'formData': {},
      'queueID': 'queue',
      'uploadScript': '/open/fileupload/image',
      'onUploadComplete': function (file, data) {
        data = JSON.parse(data);
        if (data.code == 0) {
          Toast.success(data.msg);
          $("#img").html("<img src='" + data.path + "' style='width:150px;height:95px;'>");
          $("#picurl").val(data.path);
        } else {
          clearFile();
          Toast.error(data.msg);
        }
      },
      'onDrop': function (file, fileDropCount) {
        clearFile();
      },
      'onClearQueue': function (queue) {
        clearFile();
      },
      'onCancel': function () {
        clearFile();
      }
    });
    $("#save").on("click",function(){
      $("#footer_content").val(ue.getContent());
      $('#addForm').submit();
    });
    $('#addForm').ajaxForm({
      dataType: 'json',
      beforeSubmit: function (arr, form, options) {
        sublime.showLoadingbar($(".main-content"));
      },
      success: function (data, statusText, xhr, form) {
        if (data.code == 0) {
          Toast.success(data.msg);
        } else {
          Toast.error(data.msg);
        }
        sublime.closeLoadingbar($(".main-content"));
      }
    });
  });
</script>
